<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>服务管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <div slot="header">
        <span>新增服务</span>
      </div>
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="110px">
        <el-form-item label="服务名称" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="服务模式" prop="service_type">
          <el-select v-model="addForm.service_type" disabled="">
            <el-option key="4" label="服务卡" value='4'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属项目" prop="project_id">
          <el-select v-model="addForm.project_id" placeholder="请选择" filterable clearable @change="selectProject">
            <el-option v-for="item in selectData.get_project" :key="item.id"
              :label="item.name + '【' + item.id + '】'" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联服务卡" prop="relation_id">
          <el-select v-model="addForm.relation_id" placeholder="请选择" filterable clearable @change="changeCard">
            <el-option v-for="item in selectData.service_card_config" :key="item.id"
              :label="item.name + '【' + item.id + '】'" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务次数" prop="num">
          <el-input v-model="addForm.num" placeholder="" disabled=""></el-input>
        </el-form-item>
        <!-- 使用频率限制 -->
        <el-form-item label="使用频率限制" v-show='addForm.card_type === 1'>
          <el-col :span="12">
            <el-form-item prop="use_limit_unit">
              <el-select v-model="addForm.use_limit_unit">
                <el-option value="" label="请选择"></el-option>
                <el-option value="1" label="每日"></el-option>
                <el-option value="2" label="每周"></el-option>
                <el-option value="3" label="每月"></el-option>
                <el-option value="4" label="每年"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="use_limit">
              <el-input placeholder="请输入" v-model="addForm.use_limit">
                <el-link type="primary" slot="append">次</el-link>
              </el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <!-- 有效期 -->
        <el-form-item label="有效期" required>
          <el-col :span="12">
            <el-form-item prop="validity" v-show="addForm.validity_unit != 4" :rules="
                addForm.validity_unit != 4
                  ? [
                      { required: true, message: '请输入', trigger: 'blur' },
                      { type: 'number', message: '请输入数字' }
                    ]
                  : []
              ">
              <el-input placeholder="请输入" v-model.number="addForm.validity">
              </el-input>
            </el-form-item>
            <el-form-item prop="valid_start_time" v-show="addForm.validity_unit == 4"
            :rules="addForm.validity_unit == 4
                  ? [
                      {
                        required: true,
                        message: '请选择日期',
                        trigger: 'change'
                      }
                    ]
                  : []
              ">
              <el-date-picker type="date" placeholder="请选择" v-model="addForm.valid_start_time" style="width: 100%"
                value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="validity_unit">
              <el-select v-model="addForm.validity_unit" placeholder="请选择">
                <el-option value="1" label="日"></el-option>
                <el-option value="2" label="月"></el-option>
                <el-option value="3" label="年"></el-option>
                <el-option value="4" label="截止日期"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="使用方式" prop="use_way">
          <el-select v-model="addForm.use_way" placeholder="请选择" disabled="">
            <el-option key="1" label="预约使用" value="1"> </el-option>
            <el-option key="2" label="直接使用" value="2"> </el-option>
            <el-option key="3" label="在线服务" value="3"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="适用范围说明" prop="scope_explain">
          <el-input v-model="addForm.scope_explain"></el-input>
        </el-form-item>
        <el-form-item label="限制使用区域" prop="is_limit">
          <el-radio v-model="addForm.is_limit" label="1" @change="changeLimit">限制</el-radio>
          <el-radio v-model="addForm.is_limit" label="0" @change="changeLimit">不限制</el-radio>
        </el-form-item>
        <el-form-item label="区域限制方式" prop="limit_way" v-show="addForm.is_limit == '1'" :rules="
            addForm.is_limit == 1
              ? [{ required: true, message: '请选择', trigger: 'change' }]
              : []
          ">
          <el-select v-model="addForm.limit_way" placeholder="请选择" @change="changeRule">
            <el-option value="1" label="按省份"></el-option>
            <el-option value="2" label="按城市"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用区域范围" prop="scope_name" v-show="addForm.is_limit == '1'" :rules="
            addForm.is_limit == 1
              ? [{ required: true, message: '请选择', trigger: 'change' }]
              : []
          ">
          <el-input placeholder="请选择" v-model="addForm.scope_name" readonly>
            <el-link type="primary" slot="append" @click="openRangeDialog">选择区域</el-link>
          </el-input>
          <el-input v-model="addForm.area_limit" v-show="false"> </el-input>
        </el-form-item>
        <el-form-item label="使用区域描述" prop="use_scope_describe">
          <el-input v-model="addForm.use_scope_describe" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="服务标准" prop="service_standard">
          <el-input type="textarea" v-model="addForm.service_standard" show-word-limit maxlength="500"></el-input>
        </el-form-item>
        <el-form-item label="服务限制" prop="service_limit">
          <el-input type="textarea" v-model="addForm.service_limit" show-word-limit maxlength="500"></el-input>
        </el-form-item>
        <el-form-item label="服务须知" prop="service_explain">
          <el-input type="textarea" v-model="addForm.service_explain" show-word-limit maxlength="500"></el-input>
        </el-form-item>
        <el-form-item label="banner图" prop="banner" required>
          <el-upload :action="ossUrl" :headers="ossHeader" list-type="picture-card" :auto-upload="true" :limit="1"
            v-model="addForm.banner" :on-success="uploadSuccessMain" :on-preview="handlePictureCardPreviewMain"
            :on-remove="handleRemoveMain" :data="{ system: 'chongtai', module: '商品图片' }"
            :class="{ uoloadSty: showBtnImgMain, disUoloadSty: noneBtnImgMain }" :on-change="imgChangeMain"
            :file-list="addForm.coverUrlList">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="addForm.remark" show-word-limit maxlength="500"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="$router.push('/project/Service')">
            取 消
          </el-button>
          <el-button class="theme-background-color" @click="saveInfo">保 存</el-button>
        </el-form-item>
      </el-form>

      <!-- 选择省份区域对话框 -->
      <chooseMultipleProvince :provinceVisible.sync="provinceVisible" :checkedRanges="checkedRanges"
        @showProvincesData="updateRanges"></chooseMultipleProvince>

      <!-- 选择城市区域对话框 -->
      <ChooseMultipleCity :cityVisible.sync="cityVisible" :checkedRanges="checkedRanges" @showCitiesData="updateRanges">
      </ChooseMultipleCity>
    </el-card>
  </div>
</template>

<script>
  import chooseMultipleProvince from '../region/ChooseMultipleProvince.vue'
  import ChooseMultipleCity from '../region/ChooseMultipleCity.vue'
  export default {
    components: {
      chooseMultipleProvince,
      ChooseMultipleCity
    },
    data() {
      var imageValidator = (rule, value, callback) => {
        if (
          this.addForm.banner === undefined ||
          this.addForm.banner === ''
        ) {
          callback(new Error('请上传banner图'))
        }
        callback()
      }
      return {
        addForm: {
          name: '',
          service_type: '4',
          relation_id: '',
          project_id: '',
          project_name: '',
          num: '',
          use_limit_unit: '',
          use_limit: '',
          validity: '',
          valid_start_time: '',
          validity_unit: '',
          use_way: '',
          scope_explain: '',
          is_limit: '0',
          limit_way: '',
          use_scope: '',
          scope_name: '全国',
          use_scope_describe: '全国',
          service_standard: '',
          service_limit: '',
          service_explain: '',
          banner: '',
          remark: '',
          coverUrlList: [],
          card_type: 0
        },
        addFormRules: {
          name: [
            { required: true, message: '请输入', trigger: 'blur' },
            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
          ],
          service_type: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          project_id: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          relation_id: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          num: [
            { required: true, message: '请输入', trigger: 'number' }
          ],
          validity_unit: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          scope_explain: [
            { required: true, message: '请输入', trigger: 'number' }
          ],
          is_limit: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          use_scope_describe: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          service_standard: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          service_limit: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          banner: [
            { validator: imageValidator }
          ],
          use_way: [
            { required: true, message: '请选择', trigger: 'change' }
          ]
        },
        selectData: [],

        // 省市控件勾选用的数据
        checkedRanges: [],
        provinceVisible: false,
        cityVisible: false,

        // banner图
        ossUrl: this.GLOBAL.ossUrl,
        ossHeader: this.GLOBAL.ossHeader,
        showBtnImgMain: true,
        noneBtnImgMain: false
      }
    },
    created() {
      this.getSelectData()
    },
    methods: {
      async getSelectData() {
        const {
          data: res
        } = await this.$http.post('/admin/data/find', {
          code: 'service_card_config,get_project'
        })
        // 返回结果
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.selectData = res.data
      },
      // 选择关联服务卡
      changeCard(val) {
        const arr = this.selectData.service_card_config
        for (var i = 0; i < arr.length; i++) {
          if (val === arr[i].id) {
            this.addForm.num = arr[i].service_num
            this.addForm.use_way = arr[i].use_way
            this.addForm.card_type = arr[i].card_type
            this.addForm.use_limit_unit = arr[i].frequency_limit_way
            this.addForm.use_limit = arr[i].frequency_limit
            this.addForm.validity_unit = arr[i].unit + ""
            if (arr[i].unit == 4) {
              this.addForm.valid_start_time = arr[i].period
            } else {
              this.addForm.validity = parseInt(arr[i].period)
            }
            this.addForm.scope_explain = arr[i].apply_area
            this.addForm.is_limit = arr[i].area_limit_flag + ""
            if (arr[i].area_limit_way === 0) {
              this.addForm.limit_way = ''
            } else {
              this.addForm.limit_way = arr[i].area_limit_way + ""
            }

            this.addForm.scope_name = arr[i].area_limit_name.join(',')
            this.addForm.use_scope_describe = arr[i].area_limit_desc
            this.addForm.service_standard = arr[i].service_standard
            this.addForm.service_limit = arr[i].service_limit
            this.addForm.service_explain = arr[i].service_instr
            this.addForm.banner = arr[i].banner_image
            this.addForm.coverUrlList = [{ name: 'aa.jpg', url: arr[i].banner_image }]
            this.noneBtnImgMain = 1
          }
        }
      },
      selectProject(val) {
        const arr = this.selectData.get_project
        for (var i = 0; i < arr.length; i++) {
          if (val === arr[i].id) {
            this.addForm.project_name = arr[i].name
          }
        }
      },
      changeLimit(val) {
        if (val == 0) {
          this.addForm.range_name = ''
          this.addForm.use_scope = ''
          this.addForm.scope_name = '全国'
          this.addForm.use_scope_describe = '全国'
        } else {
          this.addForm.use_scope_describe = ''
        }
      },

      updateRanges(data) {
        this.addForm.use_scope = data.code.join(',')
        this.addForm.use_scope_describe = data.name.join(',')
        this.addForm.scope_name = this.addForm.use_scope_describe
      },
      changeRule() {
        this.addForm.use_scope = ''
        this.addForm.range_name = ''
        this.addForm.use_scope_describe = ''
      },
      openRangeDialog() {
        if (this.addForm.limit_way === '') {
          this.$message({
            message: '请先选择区域限制方式',
            type: 'warning'
          })
        } else {
          this.provinceRangeDialogVisible = true
          if (parseInt(this.addForm.limit_way) === 1) {
            this.provinceVisible = true
          } else {
            this.cityVisible = true
            this.provinceVisible = false
          }
          this.checkedRanges = this.addForm.use_scope
            ? this.addForm.use_scope.split(',')
            : []
        }
      },
      // 保存
      saveInfo() {
        this.$refs.addFormRef.validate(async (valid) => {
          if (!valid) return
          this.addForm.period = this.period

          const {
            data: res
          } = await this.$http.post(
            '/admin/ServiceSystem/addCardService',
            this.addForm
          )
          if (res.meta.status !== 200) {
            return this.$message.error(res.meta.msg)
          }
          this.$message.success(res.meta.msg)
          this.$router.push('/project/Service')
        })
      },
      uploadSuccessMain(response, file, fileList) {
        if (Number.parseInt(response.code) === 10001) {
          this.addForm.banner = response.data.url
        }
      },
      //   删除图片
      handleRemoveMain(file, fileList) {
        this.addForm.banner_image = ''
        this.noneBtnImgMain = fileList.length === 1
      },
      // 放大图片
      handlePictureCardPreviewMain(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      imgChangeMain(file, fileList) {
        this.noneBtnImgMain = fileList.length === 1
      }
    },
    computed: {
      period() {
        return this.addForm.validity_unit == 4
          ? this.addForm.period_date
          : this.addForm.period_num
      }
    }
  }
</script>

<style lang="less" scoped>
  .el-form {
    width: 80%;
    margin-left: 15px;

    .el-select {
      width: 100%;
    }
  }

  /deep/ .uoloadSty .el-upload--picture-card {
    width: 230px;
    display: true;
  }

  /deep/ .disUoloadSty .el-upload--picture-card {
    display: none;
    /* 上传按钮隐藏 */
  }

  /deep/ .uoloadSty .el-upload-list__item {
    width: 230px;
  }
</style>
